import type {PropType} from "vue";
import {defineComponent} from "vue";
import {getComponent} from "@utils/app";
import {EmitNames} from "@/constants/common";
import emitter from "@utils/common/Mitt";
import SvgIcon from "@components/common/SvgIcon";

/**
 * WindowContent 组件
 */
export default defineComponent({
  name: "WindowContent",
  props: {
    winContent: Object as PropType<WindowInterface.WindowContentProps>,
  },
  setup(props) {
    const content = props.winContent!;
    const component = getComponent(content.component);
    const isAlive = ref(true);
    const reload = () => {
      isAlive.value = false;
      setTimeout(() => {
        nextTick(() => {
          isAlive.value = true;
        }).then();
      }, 800);
    };

    // 通过 provide、inject 依赖注入的方式刷新组件
    provide("reload", reload);

    // 通过消息事件的方式刷新组件
    emitter.on(EmitNames.Refresh, reload);

    return () => (
      <div
        class="win-content flex flex-col grow w-full h-full rounded-[14px] bg-white/95 backdrop-blur-[20px] overflow-hidden"
        onMousedown={e => {
          e.stopPropagation();
          content.toShowApp(content.appKey);
        }}
      >
        <div
          class="h-10 bg-[#161616c2] backdrop-blur-[20px] flex flex-row justify-center items-center whitespace-nowrap text-ellipsis overflow-hidden"
          style={{ backgroundColor: content.titleBgColor }}
          onMousedown={content.toMousedown}
          onDblclick={content.toDblclick}
        >
          <div class="win-app-bar-opt flex justify-center items-center ml-3.5">
            <SvgIcon
              onClick={e => {
                e.stopPropagation();
                content.toCloseApp(content.appKey);
              }}
              class="opt-icon winClose win-bar-opt-icon"
              icon="mdi:close"
              size="14"
            />
            <SvgIcon
              onClick={e => {
                e.stopPropagation();
                content.toHideApp(content.appKey);
              }}
              class="opt-icon winMin win-bar-opt-icon"
              icon="mdi:minus"
              size="14"
            />
            <SvgIcon onClick={reload} class="opt-icon winRefresh win-bar-opt-icon" icon="mi:refresh" size="14" />
            <SvgIcon
              onClick={() => {
                isAlive.value = false;
                content.toFullScreen();
                setTimeout(reload, 100);
              }}
              class="opt-icon winFull win-bar-opt-icon full-icon"
              icon="el:resize-small"
              rotate={3}
              size="14"
            />
          </div>
          <div
            class="bar-title grow text-center mr-[84px] font-medium text-sm cursor-move text-gray-700"
            style={{ color: content.titleColor }}
            v-text={content.title}
          ></div>
        </div>

        <div class="grow h-0">
          {isAlive.value ? (
            component ? (
              h(component)
            ) : content.isLink && content.linkType == "in" ? (
              <object data={content.link} class="w-full h-full" type="text/html"></object>
            ) : (
              "无组件数据"
            )
          ) : (
            <div class="w-full h-full flex justify-center items-center flex-col">
              <span class="mac-loading mac-loading-spinner mac-loading-lg text-primary"></span>
              <p class="">加载中。。。</p>
            </div>
          )}
        </div>
      </div>
    );
  },
});
